<template>
  <div class="icons-wrapper">
    <div class="content-wrapper">
      <div class="icon"></div>
      <div class="list">
        <p v-for="item in icons" :title="item.title">{{ item.icon }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";

const icons = reactive([
  {
    title: '哈哈',
    icon: '😀'
  },
  {
    title: '大笑',
    icon: '😄'
  },
  {
    title: '嘻嘻',
    icon: '😁'
  },
  {
    title: '斜眼笑',
    icon: '😆'
  },
  {
    title: '苦笑',
    icon: '😅'
  },
  {
    title: '笑得满地打滚',
    icon: '🤣'
  },
  {
    title: '笑哭',
    icon: '😂'
  },
  {
    title: '呵呵',
    icon: '🙂'
  },
  {
    title: '倒脸',
    icon: '🙃'
  },
  {
    title: '眨眼',
    icon: '😉'
  },
  {
    title: '喜笑颜开',
    icon: '🥰'
  },
  {
    title: '花痴',
    icon: '😍'
  },
  {
    title: '飞吻',
    icon: '😘'
  },
  {
    title: '亲亲',
    icon: '😗'
  },
  {
    title: '吐舌',
    icon: '😛'
  },
  {
    title: '滑稽',
    icon: '🤪'
  },
  {
    title: '眯眼吐舌',
    icon: '😝'
  },
  {
    title: '抱抱',
    icon: '🤗'
  },
  {
    title: '不说',
    icon: '🤭'
  },
  {
    title: '睁眼捂嘴',
    icon: '🫢'
  },
  {
    title: '偷懒',
    icon: '🫣'
  },
  {
    title: '想一想',
    icon: '🤔'
  },
  {
    title: '致敬',
    icon: '🫡'
  },
  {
    title: '冷漠',
    icon: '😐'
  },
  {
    title: '无语',
    icon: '😑'
  },
  {
    title: '沉默',
    icon: '😶'
  },
  {
    title: '得意',
    icon: '😏'
  },
  {
    title: '翻白眼',
    icon: '🙄'
  },
  {
    title: '呼气',
    icon: '😮‍💨'
  },
  {
    title: '松了口气',
    icon: '😌'
  },
  {
    title: '困',
    icon: '😪'
  },
  {
    title: '流口水',
    icon: '🤤'
  },
  {
    title: '睡着了',
    icon: '😴'
  },
])
</script>

<style scoped lang="scss">
.icons-wrapper {
  position: absolute;
  width: 234px;
  height: 200px;
  background: #fff;
  bottom: 30px;
  border-radius: 5px;
  left: -10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);

  .content-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    .icon {
      position: absolute;
      left: 15px;
      bottom: -5px;
      width: 10px;
      height: 10px;
      background: #fff;
      transform: rotate(45deg);
    }

    .list{
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      p{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
      }
      p:hover{
        background: #eee;
      }
    }
  }
}
</style>